<template>
	<view>
		<view v-if="mercheantInfo.status === 3" style="width: 100%;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 28rpx;background-color: #f00;color: #fff;">审核未通过</view>
		<view class="active-info">
			<view class="t-cell t-cell-h" @click="handleChooseImage">
				<view class="t-cell-content">店铺logo</view>
				<image v-if="mercheantInfo?.logoUrl" class="t-cell-image" :src="mercheantInfo?.logoUrl" />
				<u-icon name="arrow-right" size="24" color="#666"></u-icon>
			</view>
			<view class="t-cell">
				<view class="t-cell-content">店铺名称</view>
				<u--input class="input-flex" border="none" type="number" inputAlign="right" :fontSize="28" :value="mercheantInfo?.name" @input="handleNameChange" placeholderStyle="font-size: 28rpx;" customStyle="height: 40rpx;" placeholder="请输入店铺名称"></u--input>
				<u-icon name="arrow-right" size="24" color="#666"></u-icon>
			</view>
			<view class="t-cell" @click="handleTypeOpen">
				<view class="t-cell-content">店铺分类</view>
				<view class="t-cell-text">{{mercheantInfo?.categoryName}}</view>
				<u-icon name="arrow-right" size="24" color="#666"></u-icon>
			</view>
			<view class="t-cell">
				<view class="t-cell-content">场地电话</view>
				<u--input class="input-flex" border="none" type="number" inputAlign="right" :fontSize="28" :value="mercheantInfo?.tel" @input="handleTelChange" placeholderStyle="font-size: 28rpx;" customStyle="height: 40rpx;" placeholder="请输入店铺名称"></u--input>
				<u-icon name="arrow-right" size="24" color="#666"></u-icon>
			</view>
			<view class="t-cell" @click="handleChooseLocation">
				<view class="t-cell-content">场地地址</view>
				<view class="t-cell-text">{{mercheantInfo?.locationName}}</view>
				<u-icon name="arrow-right" size="24" color="#666"></u-icon>
			</view>
			<view class="t-cell" @click="handleDateClick">
				<view class="t-cell-content">营业时间</view>
				<view class="t-cell-text">{{mercheantInfo?.workTime}}</view>
				<u-icon name="arrow-right" size="24" color="#666"></u-icon>
			</view>
		</view>

		<!-- 场地简介 -->
		<view class="active-info">
			<view class="t-cell" @click="handleSexOpen">
				<view class="t-cell-content">场地简介</view>
				<view class="t-cell-text"></view>
				<u-icon name="arrow-right" size="24" color="#666"></u-icon>
			</view>
			<!-- <view class="shop-desc">{{mercheantInfo?.intro}}</view> -->
			<textarea :value="mercheantInfo?.intro" @input="handleIntroInput" style="font-size: 28rpx;color: #333;padding: 25rpx 18rpx;height: 300rpx;" placeholder-style="font-size: 28rpx;color: #666;" placeholder="请输入"></textarea>
		</view>

		<!-- 标签信息 -->
		<view class="active-info">
			<view class="t-cell" @click="handleTagsOpen">
				<view class="t-cell-content">标签信息</view>
				<view class="t-cell-text"></view>
				<u-icon name="arrow-right" size="24" color="#666"></u-icon>
			</view>
			<view class="empty" v-if="tagVOListSelected.length === 0">
				<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
				<view class="empty-text">暂无数据～</view>
			</view>
			<view class="shop-tags">
				<view v-for="(tag, index) in (tagVOListSelected || [])" :key="index">
					<view v-if="index <= 2 || showMore">
						<view class="tags-tit">{{ tag.className }}</view>
						<view class="tags-con">
							<view v-for="item in (tag.tagItemVOList || [])" :key="item.value" class="tags-con-it">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="tagVOListSelected.length > 2" class="read-more" @click="handleMore">{{ showMore ? '收起全部' : '查看全部' }}</view>
		</view>

		<!-- 场地相册 -->
		<view class="active-info">
			<view class="t-cell" @click="handlePhotoClick">
				<view class="t-cell-content">场地相册</view>
				<view class="t-cell-text"></view>
				<u-icon name="arrow-right" size="24" color="#666"></u-icon>
			</view>
			<view v-if="(photoList || []).length > 0" style="height: 36rpx;"></view>
			<u-row
				v-if="(photoList || []).length > 0"
				justify="flex-start"
				gutter="20"
			>
				<u-col span="3" v-for="item in (photoList || [])">
					<image class="show-photo" :src="item.url" mode="aspectFit" />
				</u-col>
			</u-row>
			<!-- <view class="read-more" v-if="(photoList || []).length > 0" @click="handlePhotoClick">查看全部</view> -->
			<!-- <view class="empty" v-if="(photoList || []).length === 0">
				<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
				<view class="empty-text">暂无数据～</view>
			</view> -->
		</view>

		<!-- 项目介绍 -->
		<!-- <view class="active-info">
			<view class="t-cell" @click="handleSexOpen">
				<view class="t-cell-content">项目介绍</view>
				<view class="t-cell-text">te</view>
				<u-icon name="arrow-right" size="24" color="#666"></u-icon>
			</view>
			<view class="shop-desc">此外，从设立地点看，轰趴馆主要分布在别墅、社区和商业综合体内。近年来又涌现出游艇轰趴、农庄轰趴、四合院轰趴等特色轰趴，但总体以别墅轰趴、社区轰趴和商业综合体轰趴为主。目前别墅轰趴、社区轰趴、商业综合体轰趴占比分别可以达到30%、30%、40%。</view>
			<u-row
				justify="space-between"
				gutter="10"
			>
				<u-col span="3">
					<image class="show-photo" src="../../static/logo.png" />
				</u-col>
				<u-col span="3">
					<image class="show-photo" src="../../static/logo.png" />
				</u-col>
				<u-col span="3">
					<image class="show-photo" src="../../static/logo.png" />
				</u-col>
				<u-col span="3">
					<image class="show-photo" src="../../static/logo.png" />
				</u-col>
			</u-row>
			<view class="read-more">查看全部</view>
		</view> -->

		<!-- 分类 -->
		<u-picker :value="mercheantInfo.categoryId" :show="showType" @close="handleTypeClose" @cancel="handleTypeClose" @confirm="handleTypeChange" :closeOnClickOverlay="true" :columns="[categoryList]" keyName="name" confirmColor="#333" cancelColor="#333"></u-picker>

		<tui-tags-modal :show="showTags" @close="handleTagsClose" @submit="handleTagsSubmit"></tui-tags-modal>

		<tui-open-time-modal :show="showDate" @close="handleDateClose" @submit="handleDateSubmit"></tui-open-time-modal>


		<view style="margin: 0 24rpx;">
			<u-button v-if="mercheantInfo.status === 1" class="btn" customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 88rpx;background-color: #ddd;color: #fff;" color="#fff">
				<text>审核中</text>
			</u-button>
			<u-button v-else class="btn" @click="handleSubmit" customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 88rpx;background-color: #030303;color: #fff;" color="#fff">
				<text>{{ mercheantInfo.status === 2 ? '提交' : '审核未通过，重新提交' }}</text>
			</u-button>
		</view>
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script>
	import {
		getMerchantInfo, getActivityCategoryList, commitMerchantApply,
	} from '../../config/api.js';
	import { to, uploadAfter } from '../../config/utils.js';
	export default {
		data() {
			return {
				showType: false,
				showTags: false,
				showDate: false,
				showMore: false,
				photoList: [],
				mercheantInfo: {},
				tagVOListSelected: [],
				categoryList: [
				],

			}
		},
		onShow() {
			let photo = uni.getStorageSync('__photo__');
			if(photo) {
				uni.removeStorage({
					key: '__photo__'
				});
				this.photoList = photo.split('|').map(item => ({ url: item }));
				uni.setStorageSync('__photo_local__', photo);
			}
		},
		onReady() {
			this.fetchMerchantInfo();
			this.fetchActivityCategoryList();
		},
		methods: {
			handleMore() {
				this.showMore = !this.showMore;
			},
			handleNameChange(val) {
				this.mercheantInfo.name = val;
			},
			async fetchActivityCategoryList() {
				const [err, activityCategory] = await to(getActivityCategoryList());
				if(err) return;
				this.categoryList = [
					...this.categoryList,
					...(activityCategory?.data || [])
				];
			},
			handleIntroInput(e) {
				this.mercheantInfo = {
					...this.mercheantInfo,
					intro: e.detail.value
				};
			},
			handleTypeOpen() {
				this.showType = true;
			},
			handleTypeClose() {
				this.showType = false;
			},
			handleTypeChange(e) {
				const { value } = e;
				const { id, name } = value[0];
				this.mercheantInfo = {
					...this.mercheantInfo,
					categoryName: name,
					categoryId: id,
				};
				this.showType = false;
			},
			handleTelChange(val) {
				this.mercheantInfo.tel = val;
			},

			// 选择位置
			handleChooseLocation() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success(res) {
								console.log(res);
								that.mercheantInfo = {
									...that.mercheantInfo,
									latitude: res.latitude,
									longitude: res.longitude,
									address: res.address,
									locationName: res.name
								};
							},
							fail(e) {
								console.log(e);
							}
						})
					},
					fail(e) {
						console.log(e);
					}
				});
			},
			// 营业时间
			handleDateClick() {
				this.showDate = true;
			},
			handleDateClose() {
				this.showDate = false;
			},
			handleDateSubmit(data) {
				if(data?.workTime?.name) {
					this.mercheantInfo = {
						...this.mercheantInfo,
						workTime: data?.workTime?.name
					};
				}
			},

			// 标签
			handleTagsClose() {
				this.showTags = false;
			},
			handleTagsOpen() {
				this.showTags = true;
			},
			handleTagsSubmit(tags) {
				// this.mercheantInfo.tagJson = tags;
				console.log(tags);
				let _values = tags.map(item => item.value);
				let result = [];
				(this.mercheantInfo?.tagVOList || []).forEach(item => {
					let _obj = {};
					let _selected = (item.tagItemVOList || []).filter(item => _values.includes(item.value));
					if(_selected.length > 0) {
						_obj.className = item.className;
						_obj.tagItemVOList = _selected;
						result.push(_obj);
					}
				})
				this.tagVOListSelected = result;
				console.log(this.tagVOListSelected)

				this.showTags = false;
			},
			handlePhotoClick() {
				uni.navigateTo({
					url: '/pages/shop-photo/shop-photo'
				})
			},
			handleChooseImage() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async function (res) {
						let paths = (res.tempFilePaths || []).map(item => ({ url: item }))
						if(!paths.length) return uni.showToast({
							title: '获取图片失败'
						})
						const fileData = await uploadAfter(paths);
						let fileList = fileData?.filter(item => item.url);
						that.mercheantInfo.logoUrl = fileList[0]?.url || '';
					}
				});
			},
			async fetchMerchantInfo() {
				const [err, mercheantInfo] = await to(getMerchantInfo());
				if(err) return;
				this.mercheantInfo = mercheantInfo?.data || {};
				let result = [];
				(this.mercheantInfo?.tagVOList || []).forEach(item => {
					let _obj = {};
					let _selected = (item.tagItemVOList || []).filter(item => item.userSelected);
					if(_selected.length > 0) {
						_obj.className = item.className;
						_obj.tagItemVOList = _selected;
						result.push(_obj);
					}
				})
				this.tagVOListSelected = result;
				// this.tagVOListSelected = (mercheantInfo?.data?.tagVOList || []).filter(item => {
				// 	let _selected = (item.tagItemVOList || []).filter(item => item.userSelected);
				// 	if(_selected.length > 0) {
				// 		return true;
				// 	}
				// 	return false;
				// })
				this.photoList = this.mercheantInfo?.photoList?.split(',')?.map(item => ({ url: item })) || [];
				uni.setStorageSync('__photo_local__', this.mercheantInfo?.photoList?.split(',').join('|'));
			},
			async handleSubmit() {
				const { id, ...other } = this.mercheantInfo;
				let tagJson = [];
				this.tagVOListSelected.forEach(item => {
					(item.tagItemVOList || []).forEach(it => {
						tagJson.push(it.value);
					})
				})

				let params = {
					...other,
					photoList: this.photoList.map(item => item.url).join(','),
					tagJson: tagJson.join(',')//this.tagVOListSelected. this.mercheantInfo.tagJson?.map(item => item.value).join(',') || ''
				};

				const [err, data] = await to(commitMerchantApply(params));

				if(err) {
					return uni.showToast({
						title: err?.msg || '信息提交失败',
						icon: 'none'
					})
				}

				uni.showToast({
					title: data?.msg || '提交成功，等待审核...',
					icon: 'none',
				});
				uni.navigateBack();
			},
		}
	}
</script>

<style>

.active-info {
	margin: 24rpx 24rpx;
	padding: 0rpx 18rpx;
	border-radius: 18rpx;
	background-color: #fff;
}


/* 单元格 */
.t-cell {
	display: flex;
	height: 100rpx;
	align-items: center;
	border-bottom: 1rpx solid #eee;
	position: relative;
}
.t-cell.t-cell-h {
	height: 140rpx;
}
.t-cell.required::after {
	position: absolute;
	content: '*';
	font-size: 24rpx;
	color: red;
	top: 30rpx;
}
.t-cell:last-child {
	border: none;
}
.t-cell .t-cell-image {
	width: 80rpx;
	height: 80rpx;
	margin-right: 16rpx;
}
.t-cell .t-cell-content {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-left: 12rpx;
}
.t-cell-text {
	font-size: 28rpx;
	color: #333;
	margin-right: 16rpx;
	width: 450rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}

.shop-desc {
	padding: 32rpx 0;
	font-size: 28rpx;
	font-weight: 400;
	color: #333333;
	line-height: 36rpx;
}

.shop-tags {}
.tags-tit {
	font-size: 24rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	margin-top: 24rpx;
	margin-bottom: 36rpx;
}
.tags-con {
	display: flex;
	flex-wrap: wrap;
}
.tags-con-it {
	height: 34rpx;
	line-height: 34rpx;
	background: #FFFFFF;
	border-radius: 4rpx;
	border: 1rpx solid #D1D1D1;
	padding: 0 6rpx;
	font-size: 22rpx;
	font-weight: 400;
	color: #666666;
	margin-right: 16rpx;
	margin-bottom: 16rpx;
}

.read-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30rpx 0;
	font-size: 28rpx;
	font-weight: 400;
	color: #0074FC;
}

.show-photo {
	width: 155rpx;
	height: 155rpx;
	border-radius: 8rpx;
	background-color: #000;
}
</style>
